<template>
  <div class="container">
    <h3>用户登录</h3>
    <p class="tip">{{message}}</p>
    <div class="row">
      <span class="col-4">用户名:</span>
      <span class="col-8"> <input type="text" v-model.trim="username"> </span>
    </div>
    <div class="row">
      <span class="col-4">密码:</span>
      <span class="col-8"> <input type="password" v-model.trim="password"> </span>
    </div>
    <div class="row">
      <span class="col-8 offset-4"> <a class="btn btn-primary" @click.prevent="signIn">登录</a> </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "SignIn" ,
  data(){
    return { username: '' , password: '' , message: '' }
  },
  methods: {
    signIn(){
      if( 'feiyan' == this.username && 'mata' == this.password ) {
        // 将用户名保存到sessionStorage中
        sessionStorage.setItem( 'user' , this.username );
        // 清空message中的信息
        this.message = '' ;
        console.log( this.$route.query );
        this.$router.replace( '/welcome' );
      } else {
        this.message = '用户名或密码错误' ;
      }
    }
  }
}
</script>

<style scoped>
.tip {
  color: red;
}
</style>